<!-- 农机租凭和场地租凭-预约 -->
<template>
	<view>
		<uni-nav-bar title="农事服务预约" @clickLeft="back" left-icon="left" backgroundColor="#fff" color="#000"
			statusBar="true" />
		<view class="main">
			<view class="title">

			</view>
			<view class="info">
				<view class="service-price">
					<view class="title">
						<view class="box"></view>
						<view class="text">服务项目</view>
					</view>
					<template>
						<image src="@/static/socialized-service/farm-service/service-order/arable.svg" mode=""
							v-if="title==='设施租赁'"></image>
						<image src="@/static/socialized-service/farm-service/service-order/machinery.svg" mode=""
							v-if="title==='农机租赁'"></image>
					</template>

					<view class="price">
						<view class="name">
							{{title}}服务
						</view>

					</view>
				</view>
			</view>
			<view class="title">
				服务信息
			</view>
			<u--form labelPosition="left" :model="model" :rules="rules" ref="form">
				<view class="shijian">
					<image style="width: 20px; height: 20px; padding-right: 10px;"
						src="@/static/socialized-service/specialist-consultation/bottom-tabar/order-1.svg"></image>
					<text>请选择租赁时间</text>
				</view>

				<u-form-item prop="formData.datetimerange" borderBottom @click="hideKeyboard()" labelPosition="top">
				<!-- 	<uni-datetime-picker :start="Number(new Date())" v-model="model.formData.datetimerange"
						type="datetimerange" @change="changeClick" rangeSeparator="-" /> -->
				<TimeRange v-model="model.formData.datetimerange" :disabled="false" @timeChange="changeClick"  style="padding-bottom: 30px;"></TimeRange>

			
				</u-form-item>
			</u--form>
			<view class="btn">
				<u-button :text="btnName" @click="submit"></u-button>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import TimeRange from '../../components/TimeRangeSelect/index.vue'
	export default {
		components: {
			TimeRange
		},
		data() {
			return {
				title: '',
				btnName: '',
				model: {
					formData: {
						datetimerange: []
					},
				},
				rules: {
					'formData.datetimerange': {
						type: 'array',
						required: true,
						message: '请选择租赁时间',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onLoad() {
			uni.setStorageSync('datetimerange','')
			this.title = uni.getStorageSync('serviceTypeName1')
			if (this.title === '农机租赁') {
				this.btnName = '去选农机'
			} else if (this.title === '设施租赁') {
				this.btnName = '去选场地'
			}
		},
		created() {

		},
		methods: {
			changeClick(e) {
				uni.setStorageSync('datetimerange', e)
				  this.model.formData.datetimerange = e
				 // this.$refs.form.validateField('formData.datetimerange')
				//console.log(formData.datetimerange)
				this.$refs.form.validateField('formData.datetimerange')
			},
			submit() {
				this.$refs.form.validate().then(async () => {
					// 发请求
					uni.reLaunch({
						url: `/subPage1/socialized-service/farm-service/user/rentMachineryOrArable/selectMachineryOrAarable`
					})
				}).catch(errors => {
					console.log("失败信息:" + JSON.stringify(errors))
				})
			},
			back() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/farm-service/normalUser/serviceSelect/service-organization/service-order'
				})
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-top: 20rpx;
		padding: 16rpx;

		.title {

			font-weight: 400;
			font-size: 12px;
			color: #757575;
			margin: 10px 0 10px;
		}

		.info {
			margin-top: 40rpx;
			padding: 0 40rpx;

			.title {
				padding: 0;
			}
		}

		.service-price {
			position: relative;
			margin-top: 10rpx;
			height: 240rpx;
			background: linear-gradient(360deg, #2165FF 0%, #88ACFF 100%);
			box-shadow: 0px 6px 6px 1px rgba(33, 222, 157, 0.05);
			border-radius: 14px 14px 14px 14px;

			.title {
				position: relative;

				.box {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					width: 245rpx;
					border-left: 30rpx solid transparent;
					border-right: 30rpx solid transparent;
					border-top: 62rpx solid #4C84FF;
					border-bottom: 0 solid transparent;
				}

				.text {
					position: absolute;
					top: 10rpx;
					left: 50%;
					transform: translateX(-50%);
					font-size: 32rpx;
					font-weight: 500;
					color: #fff;
				}
			}

			image {
				position: absolute;
				top: 30px;
				width: 230rpx;
				height: 175rpx;
			}

			.price {
				max-width: 60%;
				position: absolute;
				top: 102rpx;
				left: 70%;
				transform: translateX(-50%);
				font-size: 40rpx;
				font-weight: 400;
				color: #FFFFFF;

				.name {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}


		}

		.shijian {
			font-weight: 400;
			font-size: 16px;
			color: #606060;
			display: flex;
			align-items: center;
		}

		.btn {
			margin-top: 60rpx;
			background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
			box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.16);
			border-radius: 15px 15px 15px 15px;
			border: none;
			color: white;


		}
	}

	/deep/.u-form {
		width: 100%;
	}

	/deep/ .u-form-item__body__left {
		width: 100% !important;
		margin-bottom: 20rpx !important;

		.u-form-item__body__left__content__label {
			font-size: 24rpx !important;
		}
	}

	/deep/.uni-date__x-input {
		font-size: 24rpx !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/ .u-line {
		border: 0 !important;
	}
</style>